<template>
    <div class="default-bg" :class="{overHidden:!showLoading()}" @click="closeUlist">
        <div class="blocking" v-show="!showLoading()">
            <img src="../packages/loading/static/loading.gif">
            <font>{{loadMsg}}</font>
        </div>
        <navbar></navbar>
        <div :class="containerFull?'container-fluid':'container'" ref="navbar">
            <div class="row">
                <transition name="move" mode="out-in">
                    <router-view></router-view>
                </transition>
                <right-side v-show="$route.meta.navShow" @ready="allReady"></right-side>
            </div>
        </div>
        <foot></foot>
        <back-top></back-top>
        <chat v-if="showChat"></chat>
        <MaskHidden></MaskHidden>
    </div>
</template>

<script>
    import Navbar from 'packages/navbar/navbar'
    import Foot from 'packages/foot/foot'
    import RightSide from 'particals/right-side/right-side'
    import BackTop from 'packages/back-top/back-top'
    import Chat from 'packages/chat/chat'
    import {mapGetters, mapMutations, mapActions} from 'vuex'
    import {getRefreshToken,saveRefreshToken,removeRefreshToken} from 'database'
    import {default as MaskHidden} from 'packages/mask/mask'

    export default {
        computed: {
            showChat() {
                return this.website.chat == 1
            },
            ...mapGetters([
              'dataReady',
              'uFunc',
              'uShow',
              'containerFull',
              'login',
              'user',
              'loadMsg',
              'website'
            ])
        },
        data() {
            return {
                ready: false,
                load: false,
                refreshToken: ''
            }
        },
        created() {
            this.load =true
            this.__getTags()
            if(this.website.recommend) {
                this.__getRecommend()
            }
            this.refreshToken = getRefreshToken()
            let _this = this;
            if(!this.$route.meta.navShow){
                this.setDataReady(true)
                setTimeout(()=>{
                    _this.ready = true;
                }, 450);
            }
            if(this.$route.meta.auth) {
                this.setContainerFull(true)
            }
            if(this.user.id) {
                this.setLogin(true)
            }else if(this.refreshToken) {
                this.load = true
                this.setLoadMsg('正在自动登录,这可能需要一些时间...')
                setTimeout(()=>{
                    if(_this.load){
                        _this.loginFail('系统响应过慢,请手动登录')
                    }
                },8000);
                this.__getToken();
            }
        },
        mounted() {
            this.$refs.navbar.style.minHeight = document.documentElement.clientHeight - 160 +'px'
        },
        methods: {
            closeUlist() {
                if(this.uShow){
                    this.setUshow(false)
                }
            },
            allReady() {
                this.ready = true;
            },
            showLoading() {
                return this.ready && this.dataReady && this.loadMsg == ''
            },
            routeChange(to,from) {
                this.ready = false
                this.setDataReady(false)
                if(this.uFunc) {
                    this.setUfunc(false)
                }
                let _this = this
                if(!to.meta.navShow || (from.meta.navShow && to.meta.navShow)){
                    setTimeout(()=>{
                        _this.ready = true
                    }, 250);
                }
                if(!to.meta.navShow) {
                    setTimeout(()=>{
                        if(!_this.dataReady){
                            _this.setDataReady(true)
                        }
                    },180)
                } else {
                    setTimeout(()=>{
                        if(!_this.ready) {
                            _this.ready = true
                        }
                    }, 450);
                }
                if(to.meta.auth) {
                    this.setContainerFull(true)
                }else{
                    this.setContainerFull(false)
                }
            },
            loginFail(msg) {
                this.load = false
                removeRefreshToken()
                this.setLoadMsg('')
                this.$message(msg)
            },
            __getTags() {
                this.$http.get('/tags').then((response)=> {
                    this.setTags(response.data)
                })
            },
            __getRecommend() {
                this.$http.get('/recommends').then((response)=> {
                    this.setRecommend(response.data)
                })
            },
            __getToken() {
                this.$http.post('/auth/refresh', {'refresh_token':this.refreshToken}).then((response)=> {
                    this.load = false
                    this.setLoadMsg('登录成功,正在拉取数据...')
                    this.saveToken(response.data.token)
                    saveRefreshToken(response.data.token.refresh_token)
                    this.$http.defaults.headers.common.Authorization = 'Bearer ' + response.data.token.access_token
                    this.__getLoginData()
                }).catch((error) =>{
                    this.loginFail('自动登录令牌失效,请手动登录')
                })
            },
            __getLoginData() {
                this.$http.get('/initial').then((response)=> {
                    this.saveUser(response.data)
                    this.setLoadMsg('')
                    this.setLogin(true)
                })
            },
            ...mapActions([
              'saveUser',
              'saveToken',
              'saveUserInfo'
            ]),
            ...mapMutations({
              setDataReady: 'SET_DATA_READY',
              setUshow: 'SET_USHOW',
              setUfunc: 'SET_UFUNC',
              setContainerFull: 'SET_CONTAINER_FULL',
              setLogin: 'SET_LOGIN',
              setLoadMsg: 'SET_LOAD_MSG',
              setTags: 'SET_TAGS',
              setRecommend: 'SET_RECOMMEND'
            })
        },
        components:{
            Navbar,Foot,RightSide,BackTop,Chat,MaskHidden
        },
        watch: {
            '$route': 'routeChange',
            login(curVal, oldVal) {
                if(curVal === true) {
                    console.log('登录成功，拉取用户详细信息...')
                    this.$http.get('/'+this.user.name+'/info').then((response)=> {
                        this.saveUserInfo(response.data)
                        let path = this.$route.path
                        if( path== "/login" || path == "/register"){
                            this.$router.push({
                                path: '/'
                            })
                        }
                    })
                }
            }
        }
    }
</script>
<style type="text/css">
    a:hover,a:visited,a:focus {
        text-decoration: none;
    }
    a:hover, a:focus {
        color: #23527c;
    }
</style>

<style scoped lang="scss">
$content-default-bg: #f6f6f6;

.default-bg {
    background: $content-default-bg;
    overflow-x: hidden;
}
.overHidden {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container,.container-fluid {
    padding-bottom: 30px;
}
.move-enter-active, .move-leave-active {
    transition: opacity .3s;
}
.move-enter, .move-leave-active {
    opacity: 0;
}
.blocking {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2001;
    background: #fff;
    filter:alpha(opacity=80);
    opacity:0.80;
    -moz-opacity:0.80;
    text-align: center;
    -khtml-opacity: 0.80;
    img{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -10px;
        height: 20px;
        width: 100px;
    }
    font {
        display: block;
        margin-top: 10px;
    }
}
</style>
